<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-cont">
            <HCollapse collapse defaultOpen>
                <template #title>
                    <span class="font-w-b" style="color: #70798b">
                        {{ subVersionInfo.versionNumber }}
                    </span>
                </template>
                <!-- 支线版本下的所有版本列表 -->
                <SubVersionSystemList
                    :detail="item"
                    :disabled="disabled"
                    :lubiaoDetail="lubiaoDetail"
                    :subVersionInfo="subVersionInfo"
                    :signPostShowType="subVersionInfo.signPostShowType"
                    v-for="item of subVersionInfo.subPmpVersionManagementDTOS"
                    :key="item.id"
                    @success="handleSuccess"
                />
                <template #titleExtra>
                    <flexbox justify="flex-end" align="center" style="width: 100%; color: #333b4b" v-if="!disabled">
                        <flexbox v-if="lubiaoDetail.pmpRegisteredProjectDTO && lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO">
                            <my-icon type="iconbianji" />
                            <span style="margin-left: 4px" @click.stop="handleEdit">编辑</span>
                        </flexbox>
                        <flexbox class="margin-l-16">
                            <my-icon type="iconquxiaoguanlian" />
                            <span style="margin-left: 4px" @click.stop="handleUnBatch">取消关联</span>
                        </flexbox>
                    </flexbox>
                </template>
            </HCollapse>
        </div>
        <CreateSubVersionModal ref="CreateSubVersionModalRef" :lubiaoDetail="lubiaoDetail" @success="handleSuccess" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import HCollapse from './components/HCollapse.vue';
import CreateSubVersionModal from '../VersionModal/CreateSubVersionModal.vue';
import SubVersionSystemList from './SubVersionSystemList.vue';
import { useMessage } from '@/hooks/common/useMessage';
import { defineComponent, reactive, toRefs, ref, unref } from 'vue';
import { message } from 'ant-design-vue/es';
export default defineComponent({
    components: {
        SubVersionSystemList,
        HCollapse,
        CreateSubVersionModal
    },
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        },
        subVersionInfo: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const CreateSubVersionModalRef = ref<any>();
        const state = reactive<any>({
            searchValue: '',
            loading: false,
            subVersionSystemList: []
        });
        // 取消关联
        const handleUnBatch = async () => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认取消关联【${props.subVersionInfo.versionNumber}】？`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        ...props.lubiaoDetail,
                        verMgtId: ''
                    };
                    const { success, errorMsg } = await api.signpostModel.save(query);
                    if (success) {
                        emit('success');
                        message.success('操作成功');
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const handleEdit = () => {
            unref(CreateSubVersionModalRef).open(props.subVersionInfo);
        };
        const handleSuccess = () => {
            emit('success');
        };
        return {
            CreateSubVersionModalRef,
            ...toRefs(state),
            handleEdit,
            handleUnBatch,
            handleSuccess
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .title-wrap {
            .icon-cont {
                display: none;
                .anticon {
                    margin-left: 8px;
                }
            }
            &:hover {
                .icon-cont {
                    display: block;
                }
            }
        }
    }
    ::v-deep(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td) {
        background: #fff !important;
    }
    ::v-deep(.ant-table-row) {
        td {
            display: flex;
            align-items: center;
        }
    }
    ::v-deep(.ant-collapse-content-box) {
        .workbench-require-card-item:nth-child(1) {
            margin-top: 8px;
        }
    }
}
</style>